<template>
	<view class="centerWrap">
		<view class="header">
			<view class="head" @click="jumpToUserInfoPage">
				<image :src="userInfo.avatar || defaultAvatarUrl" mode="aspectFill" />
			</view><!-- 头像 -->
			<view class="userInfo">
				<image src="../../static/icons/Bird.png" mode="aspectFill" />
				<view class="user_name">
					{{userInfo.nickName ? userInfo.nickName : "未登录"}}
				</view>
			</view>
		</view>
		<view class="list">
			<view class="listContent">
				<view class="title">团长控制中心</view>
				<view class="teamHeader">
					<view class="listItem" v-for="(item, index) in headerList" :key="index"
						@click="handleNavigate(item.path)">
						<image :src="item.icon" mode="widthFix" />
						<view>
							<text>{{ item.title }}</text>
						</view>
					</view>
				</view>
			</view>

		</view> 
		<view class="info">
			<view class="title">我的相关</view>
			<view class="detailItem" v-for="(item, index) in userList" :key="index" @click="handleNavigate(item.path)">
				<!-- <image :src="item.icon" mode="heightFix" style="height:50rpx; "/> -->
				<view>
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>
		<view v-if="isPopupShow" class="popupWrap">
			<view class="popup-content">
				<text>请登录</text>
				<button class="loginBtn" open-type="getUserInfo" @getuserinfo="loginByWx">使用微信一键登录</button>
				<!-- <button class="phoneLoginBtn" @click="phoneLogin">手机号登录</button> -->
			</view>
		</view>
		 <uni-popup  v-model="isPopupShow" >
		</uni-popup>
		<uni-mask v-if="isPopupShow" @click="closePopup" />
	</view>
</template>

<script>
	import {
		getSessionId,
		authLogin,
		getUserInfo
	} from '@/api/home.js'
	export default {
		data() {
			return {
				userInfo: {},
				isPopupShow: true, // 控制弹窗显示与隐藏
				token: null,
				defaultAvatarUrl: "/static/images/gugou/icon1.png",
				// memberList: [
				// 	// {
				// 	// 	title: "我的加入",
				// 	// 	icon: "/static/images/gugou/icon1.png",
				// 	// 	path: "/pages/my/groupList",
				// 	// },
				// 	{
				// 		title: "正在排谷",
				// 		icon: "/static/images/gugou/icon2.png",
				// 		path: "/pages/memberMessage/memberMessage",
				// 	},
					
				// 	{
				// 		title: "排谷消息",
				// 		icon: "/static/images/gugou/icon3NewNew.png",
				// 		path: "/pages/memberMessage/successMessage",
				// 	},
				// 	{
				// 		title: "全部订单",
				// 		icon: "/static/images/gugou/icon4New.png",
				// 		path: "/pages/memberOrder/memberOrder",
				// 	},
				// ],
				headerList: [{
						title: "新建谷团",
						icon: "/static/images/gugou/icon5New.png",
						path: "/pages/createGroup/createGroup",
					},
					{
						title: "我发起的",
						icon: "/static/images/gugou/icon6.png",
						path: `/pages/my/groupList?type=${'leader'}`,
					},
					// {
					// 	title: "谷子状态",
					// 	icon: "/static/images/gugou/icon7New.png",
					// 	path: "/pages/leaderGoods/leaderGoods",
					// },
					{
						title: "订单处理",
						icon: "/static/images/gugou/icon4New.png",
						path: "/pages/memberOrder/memberOrder",
					},
				],
				userList: [{
						title: "关注的团",
						path: "/pages/collection/collection",
					},
					{
						title: "我的订单",
						path: "/pages/memberOrder/memberOrder",
					},
					{
						title: "我的消息",
						path: "/pages/statusMessage/statusMessage",
					},
					{
						title: "收货地址",
						path: "/pages/address/address",
					},
					{
						title: "实名认证",
						path: "/pages/my/identity",
					},
					{
						title: "联系我们",
						path: "/pages/createGoods/createGoods",
					}
				],
				code: null
			}
		},
		async onLoad() {
			// 初始化去拿token进行判断
			const res = await uni.login({
				provider: 'weixin'
			});
			console.log(res, 'res')
			this.code = res.code
		},
		onShow() {
			console.log(this.userInfo?.token)
			this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo, '11')
			const token = this.userInfo?.nickName || null
			if (token) {
				this.closePopup()
			} else {
				this.showPopup()
				// uni.showModal({
				// 	title: '提示',
				// 	content: '当前未登录无法使用小程序全部功能！请登录！',
				// 	showCancel: true,
				// 	confirmText: '确定',
				// 	cancelText: '取消',
				// 	success: (res) => {
				// 	  if (res.confirm) {
				// 		console.log('用户点击了确定');
				// 	  } else if (res.cancel) {
				// 		console.log('用户点击了取消');
				// 	  }
				// 	}
				// });
			}
		},
		methods: {
			//wx登录
			async loginByWx(info) {
				try {
					uni.showLoading({
						title: '登录中...',
						mask: true, // 是否显示透明蒙层
						success() {
							console.log('Loading shown');
						}
					});
					// await this.getSessionId();
					// const res = await getSessionId({ code: res3.code });
					console.log(info, this.code);
					let wxAuth = {
						code: this.code,
						encryptedData: info.detail.encryptedData,
						iv: info.detail.iv
						// sessionId: this.$store.state.sessionId
					};
					const res = await authLogin(wxAuth);
					console.log(res, 'lo');
					uni.setStorageSync('token', res?.data?.data?.token);
					if (res?.data?.code == 200) {
						this.userInfo = res?.data?.data;
						uni.setStorageSync('userInfo',res?.data?.data);
						uni.hideLoading(); // 隐藏加载提示框
						uni.showToast({
							title: '登录成功',
							icon: 'success', // 图标，可选值：'success', 'loading', 'none'
							duration: 1500, // 提示框显示时间
							mask: true, // 是否显示透明蒙层
							success() {
							}
						});
						// authnStatus: "NO_AUTH"
						// authTime: null
						// avatarUrl: null
						// birthday: null
						// creditScore: 100
						// gender: "DEFAULT"
						// id: 8
						// idCard: null
						// name: null
						// nickname: "微信用户"
						// phone: null
						this.$store.dispatch('setToken', res?.data?.data?.token || "");
						this.closePopup();
					} else {
						uni.showToast({
							title: '登录失败',
							icon: 'none', // 图标，可选值：'success', 'loading', 'none'
							duration: 1500, // 提示框显示时间
							mask: true, // 是否显示透明蒙层
							success() {

							}
						});
					}


				} catch (error) {
					console.error(error);
				}
			},
			showPopup() {
				this.isPopupShow = true; // 显示弹窗
			},
			closePopup() {
				this.isPopupShow = false; // 关闭弹窗
			},
			login() {
			},
			handleNavigate(url) {
				uni.navigateTo({
					url:url,
				});
			},
			jumpToUserInfoPage() {
				uni.navigateTo({
					url: '/pages/my/userInfo'
				});
			},
			//获取sessionId
			async getSessionId() {
				try {
					const res3 = await uni.login({
						provider: 'weixin'
					});
					const res = await getSessionId({
						code: res3.code
					});
					if (res.data.data.sessionId) {
						await this.setSessionId(res.data.data.sessionId);
					}
				} catch (error) {
					console.error(error);
				}
				// await uni.login({
				// 	provider: 'weixin',
				// 	success: async (res3) => {
				// 		await getSessionId({code: res3.code}).then(async res => {
				// 			res.data.data.sessionId && await this.setSessionId(res.data.data.sessionId)
				// 		})
				// 	}
				// })
			},
			async setSessionId(id) {
				await this.$store.dispatch('setSessionId', id)
				console.log(this.$store.state.sessionId, 'sessionID')
			},
			phoneLogin(){
				uni.navigateTo({
					url:'/pages/my/phoneEdit?type=login'
				})
			}
		}
	}
</script>

<style>
	.centerWrap {
		position: relative;
	}
	.popupWrap {
		width: 100vw;
		height: 125vh;
		background-color: rgba(0, 0, 0, .1);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.content {
		margin-top: 100px;
	}
	.loginBtn {
		/* padding: 10px 20px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer; */
		
		width: 100%;
		margin: 100rpx auto;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		border-radius: 6rpx;
		background-color: #8DC7DF;
		/* box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); */
	}
	.popup-content {
		padding: 20px;
		width: 450rpx;
		height: 300rpx;
		background-color: white;
		border-radius: 15px;
		text-align: center;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;
	}

	.header {
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 450rpx;
		/* box-shadow: 0 0 20rpx 1rpx #3e5f8a; */
		background-image:linear-gradient(#8DC7DF,#ffffff) ;
		/* border-radius:0 0 20% 20%; */
	}
	.header .head {
		width: 150rpx;
		height: 150rpx;
		overflow: hidden;
		aspect-ratio: 1/1;
		border-radius:50%;
		background-size: cover;
		box-shadow: 0 0 20rpx 2rpx #ffffff;
	}
	.header .head image {
		width: 100%;
		height: 100%;
	}
	.userInfo {
		display:flex;
		justify-content:center;
		height: 100rpx;
	}
	.userInfo image {
		height: 80rpx;
		width: 80rpx;
	}
	.userInfo .user_name {
		line-height: 100rpx;
		color:#000000;
		font-size: 40rpx;
		font-weight: 100;
	}
	/* .header::after {
		content:' ';
		position: absolute;
		top: 30%;
		width: 80% ;
		height:90rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 700;
		line-height: 90rpx;
		background-color: #ffffff;
		color: #000000;
		box-shadow: 0 0 10rpx 2rpx #8DC7DF;
		border-radius:15px;
	} */
	

	.list {
		margin: 20rpx 40rpx;
		height: 200rpx;
		background-color: #fff;
		border-radius:15px;
	}
	.listContent {
		height: 200rpx;
		display: flex;
		flex-direction: column;
		margin: 0 20rpx;
		/* border-left: 1rpx solid #8DC7DF;
		border-right: 1rpx solid #8DC7DF; */
	}
	.title {
		font-weight:700;
		color: #000000;
		margin-bottom: 20rpx;
	}
	.listContent .teamHeader {
		flex: 1;
		display: flex;
	}
	.listContent .listItem {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}
	.listItem image {
		width: 80rpx;
		height: 80rpx;
	}
	.info {
		margin: 20rpx 40rpx;
		padding: 10rpx;
		background-color:#fff;
		border-radius: 15px;
	}
	.detailItem {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 20rpx;
	}
	.detailItem:not(:last-child) {
		border-bottom: 1rpx solid #c0c0c0;
	}
	.arrow {
		position: absolute;
		right: 50rpx;
		/* margin-right: 100rpx; */
		/* width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 10px solid #333; */
		
	}
	.arrow image{
			width: 40rpx;
			height: 40rpx;
	}

</style>
